<template>
	<el-menu router background-color="#545c64"  text-color="#fff" active-text-color="#ffd04b"
		:collapse="isCollapse" class="side-bar">

		<template v-for="(item,index) in menu">
			<el-menu-item v-if="item.path" :index="item.path">
				<i class="el-icon-menu"></i>
				<span slot="title">{{item.name}}</span>
			</el-menu-item>
			<el-submenu v-else :index="index + '1'">
				<template slot="title">
					<i :class="'el-icon-'+item.icon"></i>
					<span slot="title">{{item.name}}</span>
				</template>
				<el-menu-item v-for="element in item.children" :index="element.path">{{element.name}}</el-menu-item>
			</el-submenu>
		</template>
	</el-menu>
</template>

<script>
	import { Menu } from '@/api/';
	export default {
		data() {
			return {
				menu: [],
			}
		},
		created() {
			this.loadMenu();

		},
		methods: {
			async loadMenu() {
				let id = sessionStorage.role;
				let { status, data } = await Menu.sideMenu({ id });
				if (status) {
					this.menu = data;
				}
			}
		},
		computed: {
			isCollapse() {
				return this.$store.state.isCollapse;
			}
		},
	}
</script>

<style>
	.side-bar:not(.el-menu--collapse) {
	    width: 200px;
	 
	  }
</style>
